<template>
    <div v-if="listLength">
        <van-swipe-cell v-for="item in cartLisr">
            <van-radio :checked="item.flag" @click="carFlag(item.cartid, !item.flag)">
                <van-card :price="item.originprice" :title="item.proname" :thumb="item.img1" class="goods-card">
                    <template #footer>
                        <van-stepper v-model="item.num" @click.stop="add(item.cartid, item.num)" />
                        <!-- <van-button size="mini" class="bth" @click.stop="acc(item.cartid, item.num)">-</van-button>
                        <span>{{ item.num }}</span>
                        <van-button size="mini" class="bth" @click.stop="add(item.cartid, item.num)">+</van-button> -->
                    </template>
                </van-card>
            </van-radio>
            <template #right>
                <van-button square text="删除" type="danger" class="delete-button" @click="removeAdd(item.cartid)" />
            </template>
        </van-swipe-cell>
    </div>
    <div v-else>
        <van-empty description="购物车空空如也" image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png">
            <van-button round type="primary" class="bottom-button" @click="jump">去购物</van-button>
        </van-empty>
    </div>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { onMounted } from 'vue';
import { useDebounceFn } from '@vueuse/core'
import { useRouter } from 'vue-router';
import { useCart } from '../stores/carts'
const store = useCart()
const { cartLisr, listLength } = storeToRefs(store)
const router = useRouter()
// 调取购物车数据
onMounted(async () => {
    await store.feAcartList()
})
// 修改选中状态
let carFlag =  async (item: string, flag: boolean) => {
    await store.feachCartSelectone(item, flag)
}
// 数量减
let acc = useDebounceFn(async (cartid: string, num: number) => {
    if (num == 1) return
    num--
    await store.feachCartUpdatenum(cartid, num)
}, 500)
let add = useDebounceFn(async (cartid: string, num: number) => {
    // num++
    await store.feachCartUpdatenum(cartid, num)
}, 500)
// 删除当个数据
let removeAdd = async (cartid: string) => {
    await store.feachCartRemove(cartid)
}
// 当没有商品的时候可以跳转去购物
let jump = () => {
    router.push({ name: 'home' })
}
</script>
<style lang="scss" scoped>
.goods-card {
    margin: 0;
    background-color: white;
}

.bottom-button {
    width: 160px;
    height: 40px;
}

.van-card {
    width: 100%;

    .van-card__footer {
        display: flex;
    }

    .bth {
        width: 20px;
        height: 20px;
        border-radius: 50%;
    }

}

:deep(.van-radio__label) {
    width: 100%;
}

.delete-button {
    height: 100%;
}
</style>